import { Modal } from 'antd'
import styled from 'styled-components'
import Icon from '../../component/Icon'
import { useTranslation } from 'react-i18next';
import styles from './styles.module.css';

interface Props {
    show?: boolean;
    onClose?: () => void
}

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
`

const ImageBox = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
`

const Text = styled.div`
    position: absolute;
    bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    white-space: pre-line;
`

const Close = styled(Icon)`
    position: absolute;
    /* bottom: 1.5625rem; */
    bottom: -2rem;
    pointer-events: auto; // fix ant design Modal modalRender not response click event
`


const Success: React.FC<Props> = ({ show, onClose }) => {
    const { t } = useTranslation()
    return <Modal
        wrapClassName={styles.success_modal}
        open={show}
        maskClosable={true}
        modalRender={() => <Container>
            <ImageBox>
                <Icon
                    name='buy_success'
                    width='18.125rem'
                />
                <Text>{t('ton.success').toUpperCase()}</Text>
                <Close
                    name='modal_close'
                    width='1.875rem'
                    onClick={onClose}
                />
            </ImageBox>
        </Container>}
    ></Modal>
}

export default Success

